<template>
  <a-card>
    <div class="card-header">
      <span class="card-header-title">状态管理</span>
      <status-create v-model:type="statusType"/>
    </div>
    <use-capsule :options="statusTypes" @change="capsuleChange" class="margin-bottom"/>
    <a-table :columns="columns" :row-selection="{}"
             :pagination="tablePageConfig"
             row-key="id"
             :data-source="store.statusList">
      <template #bodyCell="{column, record}">
        <template v-if="column.key==='name'">
          <a-tag>{{record.type}}</a-tag>{{ record.name }}
        </template>
        <template v-if="column.key === 'style'">
          <a-tag :color="record.color">{{ record.name }}</a-tag>
        </template>
        <template v-else-if="column.key === 'action'">
          <span class="table-action">
            <span><edit-outlined/>编辑</span>
            <a-popconfirm title="确认删除？" @confirm="onRemove(record.id)">
              <span><delete-outlined/>删除</span>
            </a-popconfirm>
          </span>
        </template>
      </template>
    </a-table>
  </a-card>
</template>
<script setup lang="ts">
import UseCapsule from "@/components/useCapsule.vue";
import StatusCreate from "@/views/admin/dictionary/components/StatusCreate.vue";
import {onMounted, ref} from "vue";
import {statusTypes, tablePageConfig} from "@/config";
import {useStatusStore} from "@/store/status";
import {EditOutlined,DeleteOutlined} from "@ant-design/icons-vue";

const store = useStatusStore()

const columns = [
  {title: '类型-名称', dataIndex: 'name', key: 'name'},
  {title: '状态样式', key: 'style',width: 200},
  {title: '状态值', dataIndex: 'value', key: 'value',width: 200},
  {title: '操作', key: 'action',width:200},
 ]
let statusType = ref()
const getStatusList = async () => {
  await store.fetchList()
}
const capsuleChange = (value: OptionType) => {
  statusType.value = value.label;
  //切换类型 检索对应数据
  store.search(value.label)
};
const onRemove = async (id:number)=>{
  await store.remove(id)
}
onMounted(()=>{
  getStatusList()
})
</script>

<style scoped>

</style>